<!-- 日志翻译 -->
<template>
  <el-input v-model="mappingUrl" placeholder="请输入mapping.txt文件在线可访问链接，如http://xxx/mapping.txt" clearable>
    <template #prepend>MappingUrl</template>
  </el-input>
  <el-alert title="如果发现MappingUrl在点击翻译后发生非预期改变，可以尝试修正或关闭MappingUrl自动填充脚本" type="info" show-icon />
  <div style="margin: 20px 0"></div>
  <el-row justify="space-between">
    <el-col :span="7" style="display: flex;">
      <el-space direction="horizontal" alignment="center" :size="0" style="margin: auto;">
        <el-upload ref="upload" class="drag-text" drag action="#" :limit="1" :on-change="onUploadChange"
          :http-request="readLogFile" :before-upload="beforeLogUpload" auto-upload>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将待翻译的文件拖到此处</div>
          <template #tip>
            <div class="el-upload__tip">只能上传 text 文件，且不超过 10MB</div>
          </template>
        </el-upload>
      </el-space>
    </el-col>
    <el-col :span="1" style="display: flex;"><span style="margin: auto;">或者</span></el-col>

    <el-col :span="16">
      <el-input class="will-retrace-text" type="textarea" :rows="20" spellcheck="false" placeholder="请将要翻译的日志粘贴在此处"
        v-model="willRetraceLog">
      </el-input>

      <div style="margin: 10px 0"></div>
      <div style="display: flex;">
        <el-checkbox v-model="verbose" label="verbose:是否显示更多信息，如方法参数和返回值类型" size="large" />
        <el-checkbox v-model="allClassNames" label="allClassNames:是否反混淆所有匹配到的类名" size="large" />
      </div>
    </el-col>
  </el-row>

  <div style="margin: 20px 0"></div>
  <el-button type="primary" :loading="false" @click="retrace">点我进行翻译</el-button>
  <div style="margin: 20px 0"></div>
  <el-input type="textarea" :rows="25" spellcheck="false" placeholder="此处展示日志翻译结果" v-model="retraceResult">
  </el-input>
  <div></div>
</template>

<script>
import { defineComponent, ref } from "vue";
import * as RetraceApi from "./common/api";
import Constant from "./common/constant";
export default defineComponent({
  setup() {
    return {
      willRetraceLog: ref(""), //待翻译日志，el-input必须得在此声明才能进行双向绑定
    };
  },
  name: "RetraceMappingUrl",
  data() {
    return {
      mappingUrl: "",
      loading: false, //翻译按钮是否在loading
      retraceResult: "", //翻译结果
      verbose: false,
      allClassNames: false
    };
  },
  methods: {
    onUploadChange() {
      this.$refs.upload.clearFiles();
    },
    beforeLogUpload(file) {
      //   const isText = file.type === "text/plain";
      const isLt2M = file.size / 1024 / 1024 < 10;

      //   if (!isText) {
      // this.$message.error("只支持文本文件!");
      //   }
      if (!isLt2M) {
        this.$message.error("文件大小不能超过 10MB!");
      }

      return true && isLt2M;
    },
    readLogFile(params) {
      let reader = new FileReader();
      let that = this;
      reader.onloadend = function () {
        if (reader.error) {
          console.log(reader.error);
          that.$message.error("文件加载失败");
        } else {
          // console.log(reader.result);
          that.willRetraceLog = reader.result;
        }
      };
      reader.readAsText(params.file);
    },
    //翻译
    retrace() {
      if (this.willRetraceLog.trim() == "") {
        this.$message.error("待翻译文本不能为空");
        return;
      }

      let historyMappingUrl = this.mappingUrl;
      let enable = localStorage.getItem(Constant.CUSTOM_MAPPING_URL_SCRIPT_ENABLE);
      let script = localStorage.getItem(Constant.CUSTOM_MAPPING_URL_SCRIPT_CONTENT);
      //   console.log("enable=" + enable + ",script=" + script);
      if (enable == "true" && script != null) {
        try {
          eval(script);
          //   let firstRow = this.willRetraceLog.split("\n")[0];
          //   this.mappingUrl = "http://xxxx/"+firstRow
        } catch (exception) {
          console.log("exception=" + exception);
          this.$message.error("MappingUrl自动填充脚本无法执行，请认真检查");
          return;
        }
      }
      if (this.mappingUrl == undefined) {
        this.mappingUrl = historyMappingUrl;
      }

      if (this.mappingUrl.trim() == "") {
        this.$message.error("mappingUrl不能为空");
        return;
      }
      this.loading = true;
      RetraceApi.retraceByUrl(this.mappingUrl, this.willRetraceLog, this.verbose, this.allClassNames)
        .then((result) => {
          this.loading = false;
          if (result == null || result == undefined) {
            this.$message.error("未知错误");
            return;
          }
          if (result.code == 1) {
            this.retraceResult = result.data;
            this.$refs.upload.clearFiles();
            this.$message.success("翻译成功");
          } else if (result.code == 1001) {
            this.$message.error("mapping.txt文件下载失败，请检查MappingUrl是否正常");
          } else {
            this.$message.error("未知错误");
          }
        })
        .catch((error) => {
          this.loading = false;
          this.$message.error(error);
        });
    },
  },
});
</script>

<style scoped>
.drag-text {
  width: 100%;
}

.will-retrace-text {
  width: 100%;
}
</style>
